import { Button } from "antd";
import React, { useState, useContext, useMemo, useCallback, memo } from "react";
import { AuthContext, AuthContextProps } from "./Contexts";

const UseContext: React.FC = () => {
  const [currentUser, setCurrentUser] = useState<string>("xx");
  const [, setCount] = useState<number>(0);

  const login = useCallback(() => {
    setCurrentUser("xx");
  }, []);

  const contextValue = useMemo<AuthContextProps>(
    () => ({
      currentUser,
      login
    }),
    [currentUser, login]
  );

  return (
    <>
      <AuthContext.Provider value={contextValue}>
        <Page />
      </AuthContext.Provider>
      <Button onClick={() => setCount(prev => prev + 1)}>点击</Button>
    </>
  );
};

const Page = memo(() => {
  const { currentUser } = useContext(AuthContext) || {};
  console.log(currentUser);
  return (
    <>
      <h3>{currentUser}</h3>
    </>
  );
});
export default UseContext;
